<template>

	<view class="flex-col homepage">
		<u-steps current="0" style="width:320px;">
			<u-steps-item title="房屋信息"></u-steps-item>
			<u-steps-item title="住户信息"></u-steps-item>
			<u-steps-item title="物业审核"></u-steps-item>
			<u-steps-item title="认证成功"></u-steps-item>
		</u-steps>
		<!-- <view class="u-line-1 text">请认真填写就诊人信息</view> -->
		<view class="wrapper">

			<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">


				<u-form-item label="小区" labelWidth="80" prop="relotion" borderBottom ref="item1">
					<view class="container">
						<!-- @click="showRelation = true;" -->
						<!-- 		<uni-card is-full :is-shadow="false">
								<text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
							</uni-card> -->
						<!-- <uni-section title="本地数据" type="line" padding style="height: calc(100vh - 100px);"> -->
						<uni-data-picker placeholder="请选择小区" popup-title="请选择所在小区" :localdata="dataTree"
							v-model="form.communityId" @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
							@popupclosed="onpopupclosed" style="width: 300px;">
						</uni-data-picker>
						<!-- </uni-section> -->
					</view>
					<!-- <u--input v-model="form.relotion" disabled placeholder="请选择小区" border="none"></u--input> -->
					<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
				</u-form-item>

				<u-form-item label="楼栋" labelWidth="80" prop="userName" borderBottom ref="item1">
					<view class="container">
						
						<uni-data-picker placeholder="请选择楼栋" popup-title="请选择所在楼栋" :localdata="buildingData"
							v-model="form.buildingId" @change="onchange" @nodeclick="buildingclick" @popupopened="onpopupopened"
							@popupclosed="onpopupclosed" style="width: 300px;">
						</uni-data-picker>
					</view>
	<!-- 				<u--input v-model="form.userName" border="none" placeholder="请选择楼栋"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon> @click="showRelation = true;"-->
				</u-form-item>

				<u-form-item label="单元" labelWidth="80" prop="documentType" borderBottom 
					ref="item1">
					<view class="container">
						
						<uni-data-picker placeholder="请选择单元" popup-title="请选择所在单元" :localdata="cellData"
							v-model="form.cellId" @change="onchange" @nodeclick="cellclick" @popupopened="onpopupopened"
							@popupclosed="onpopupclosed" style="width: 300px;">
						</uni-data-picker>
					</view>
<!-- 					<u--input v-model="form.documentType" disabled placeholder="请选择单元" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>  @click="showType = true;" -->
				</u-form-item>

				<u-form-item label="楼层" labelWidth="80" prop="number" borderBottom ref="item1">
					<view class="container">
						
						<uni-data-picker placeholder="请选择楼层" popup-title="请选择所在楼层" :localdata="floorData"
							v-model="form.floorId" @change="onchange" @nodeclick="floorclick" @popupopened="onpopupopened"
							@popupclosed="onpopupclosed" style="width: 300px;">
						</uni-data-picker>
					</view>
			<!-- 		<u--input v-model="form.number" border="none" placeholder="请选择楼层"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>  @click="showType = true;" -->
				</u-form-item>

				<u-form-item label="户号" labelWidth="80" prop="hospitalNumber" borderBottom ref="item1">
<!-- 					<u--input v-model="form.hospitalNumber" border="none" placeholder="请选择户号"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon> @click="showType = true;" -->
					<view class="container">
						
						<uni-data-picker placeholder="请选择户号" popup-title="请选择所在户号" :localdata="portalData"
							v-model="form.portalId" @change="onchange" @nodeclick="portalclick" @popupopened="onpopupopened"
							@popupclosed="onpopupclosed" style="width: 300px;">
						</uni-data-picker>
					</view>
				</u-form-item>

				<u-form-item label="房屋状态" labelWidth="150" prop="state" borderBottom ref="item1"
					@click="houseState = true;">
					<u--input v-model="form.state" border="none" placeholder="请选择状态"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>

				</u-form-item>

				<u-form-item label="设置为默认房屋" labelWidth="280" prop="defaultPerson" borderBottom ref="item1">
					<u-switch class="switch" style="position: absolute; right: 80rpx;" v-model="isopen" size="40">
					</u-switch>
				</u-form-item>
				<u-button @click="addzh()" class="button">
					下一步
				</u-button>
			</u--form>

			<!-- 关系下拉框 -->
			<u-action-sheet :show="showRelation" :actions="relotion" title="请选择与本人的关系" @close="showRelation = false"
				@select="relationSelect">
			</u-action-sheet>

			<!-- 证件类型下拉框 -->
			<u-action-sheet :show="showType" :actions="type" title="选择证件类型" @close="showType = false"
				@select="typeSelect">
			</u-action-sheet>

			<u-action-sheet :show="houseState" :actions="houseType" title="请选择此房屋状态" @close="houseState = false"
				@select="typeSelect">
			</u-action-sheet>

		</view>
		<!-- 		<view class="flex-row wrapper-two">
			<view class="u-line-3 text-two">初次添加就诊人请绑定本院就诊卡号，未持有本院就诊卡的患者需到本院自助机或窗口办理就诊卡后方可进行添加。</view>
		</view> -->


	</view>
</template>
<script>
	import request from '../../../request.js'
	export default {
		data() {
			return {
				classes: '1-1',
				dataTree: [],
				buildingData: [],
				cellData:[],
				floorData:[],
				portalData:[],

				communityId:'',
				buildingId:'',
				cellId:'',
				floorId:'',
				portalId:'',
				isopen: false,
				showRelation: false,
				showType: false,
				houseState: false,
				form: {
					communityId: '',
					buildingId: '',
					cellId:'',
					floorId:'',
					portalId:'',
					state:'',
					defaultState:''
				},
				relotion: [{
						name: '本人',
					},
					{
						name: '子女',
					},
					{
						name: '夫妻',
					},
					{
						name: '父母',
					},
					{
						name: '朋友',
					},
				],
				type: [{
						name: '身份证',
					},
					{
						name: '护照',
					},
					{
						name: '港澳通行证',
					},
				],
				houseType: [{
						name: '自主',
					},
					{
						name: '闲置',
					},
					{
						name: '出租',
					},
					{
						name: '出借',
					},
				],
				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名'
						}],
						validateTrigger: 'submit'
					},
				}
			}
		},
		onLoad() {
			this.findCommunity()
		},
		methods: {
			findCommunity() {
				request({
					url: '/housingestate/community/appFindAllCommunity',
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.community)
							let aa = res.data.data.community
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: aa[i].communityName,
									value: aa[i].communityId
								}
								this.dataTree.push(param)
							}

						}
					}
				})
			},
			findBuilding() {
				request({
					url: '/housingestate/building/appFindBuilding/'+this.communityId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.Building)
							let aa = res.data.data.Building
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: "0"+aa[i].howMany+"栋",
									value: aa[i].buildingId
								}
								this.buildingData.push(param)
							}
			
						}
					}
				})
			},
			findCell() {
				request({
					url: '/housingestate/cell/appFindCell/'+this.buildingId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.cell)
							let aa = res.data.data.cell
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: "0"+aa[i].cellNumber+"单元",
									value: aa[i].cellId
								}
								this.cellData.push(param)
							}
			
						}
					}
				})
			},
			findFloor() {
				request({
					url: '/housingestate/floor/appFindFloor/'+this.cellId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.floor)
							let aa = res.data.data.floor
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: "0"+aa[i].howFloor+"层",
									value: aa[i].floorId
								}
								this.floorData.push(param)
							}
			
						}
					}
				})
			},
			findPortal() {
				request({
					url: '/housingestate/portal/appFindPortal/'+this.floorId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.portal)
							let aa = res.data.data.portal
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: "0"+aa[i].howPortal,
									value: aa[i].portalId
								}
								this.portalData.push(param)
							}
			
						}
					}
				})
			},

			
			onnodeclick(e) {
				this.communityId=e.value
				this.findBuilding()
				this.buildingData=[]
				console.log(this.communityId);
				console.log(e);
			},
			buildingclick(e){
				this.buildingId=e.value
				this.findCell()
				this.cellData=[]
				console.log(e)
			},
			cellclick(e){
				this.cellId=e.value
				this.findFloor()
				this.floorData=[]
				console.log(e)
			},
			floorclick(e){
				this.floorId=e.value
				this.findPortal()
				this.portalData=[]
				console.log(this.floorId);
				console.log(e)
			},
			portalclick(e){
			console.log(e)	
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},

			addzh() {
				if (this.isopen) {
					this.form.defaultState = "是"
					localStorage.setItem("houseinfo",JSON.stringify(this.form))
					
				} else {
					this.form.defaultState = "否"
					localStorage.setItem("houseinfo",JSON.stringify(this.form))
					
				}
				uni.navigateTo({
					url: './userinfo'
				})
			},

			typeSelect(e) {

				this.form.state = e.name
				console.log(this.form)
			},
			relationSelect(e) {
				this.form.relotion = e.name
				console.log(this.form)
			},

		},
		onShow() {

		}
	}
</script>
<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */
	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		padding: 46rpx 35rpx 0rpx 35rpx;

		.text {
			width: 100%;
			height: 42rpx;
			margin-bottom: 40rpx;
			font-size: 32rpx;
			color: #bab3b5;
		}

		.wrapper {
			width: 678rpx;
			height: 700rpx;
			margin-bottom: 56rpx;
			border-top-width: 2rpx;
			border-top-style: solid;
			border-bottom-width: 2rpx;
			border-bottom-style: solid;
		}

		.wrapper-two {
			width: 678rpx;
			justify-content: center;
			padding: 29rpx 0rpx;
			border-radius: 20rpx;
			background: #f7f7f8;

			.text-two {
				width: 650rpx;
				height: 114rpx;
				color: #c5bbc6;
			}
		}

		.button {
			width: 694rpx;
			height: 90rpx;
			display: block;
			margin-right: auto;
			margin-left: auto;
			font-size: 36rpx;
			background: #006eff;
			color: #ffffff;
		}
	}
</style>
